/**
 * Created by Administrator on 2017/3/4 0004.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Dimensions,
    Navigator,
    BackAndroid
} from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;


export default class historyDetails extends Component{
    render() {
        return (
            <View style={styles.flex}>
                <View style={styles.mentionWords}>
                    <Text style={styles.kindMention}>货物信息</Text>
                </View>
                <View style={styles.mentionWords}>
                    <View style={styles.imageContent}>
                        <Text>货物照片</Text>
                    </View>
                    <View style={styles.mentionWords}>
                        <View style={styles.mentionContent}>
                            <Text style={styles.textFonts}>福建->厦门</Text>
                            <Text style={styles.textFonts}>订单类型：零担</Text>
                            <Text style={styles.textFonts}>货物类型：陶瓷</Text>
                            <Text style={styles.textFonts}>货物体积、重量：1000L 1t</Text>
                        </View>
                        <View style={styles.evaluation}>
                            <Text >4.0</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.mentionWords}>
                    <Text style={styles.kindMention}>车主信息</Text>
                </View>
                <View style={styles.mentionContent}>
                    <Text style={styles.textFonts}>联系人：张师傅</Text>
                    <Text style={styles.textFonts}>联系电话：1875822030</Text>
                </View>
                <View style={styles.mentionWords}>
                    <Text style={styles.kindMention}>订单信息</Text>
                </View>
                <View style={styles.mentionContent}>
                    <Text style={styles.textFonts}>订单号：xxxxxxxxx</Text>
                    <Text style={styles.textFonts}>下单时间：2017.2.12 18:00</Text>
                    <Text style={styles.textFonts}>接单时间：2017.2.12 22:00</Text>
                    <Text style={styles.textFonts}>结单时间：2017.2.20 10:00</Text>
                </View>
                <View style={styles.btnBox}>
                    <TouchableOpacity style={styles.primaryBtn}>
                        <Text style={styles.btnFont}>评价</Text>
                    </TouchableOpacity>
                </View>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    imageContent:{
      width: width * 0.4
    },
    mentionWords: {
       flexDirection:"row",
        justifyContent: "flex-start",
        alignItems:"center"
    },
    kindMention: {
        color:"blue",
        fontSize:17
    },
    mentionContent:{
        flex:1,
        flexDirection:"column",
        justifyContent: "flex-start",
        alignItems:"flex-start",
        backgroundColor: "grey",
        marginBottom:20
    },
    evaluation: {
        width:100,
        height:100,
        borderRadius: 50,
        borderColor:"grey",
        borderWidth:1,
        backgroundColor:"white",
        marginRight:10,
        flexDirection:"row",
        justifyContent:"center",
        alignItems:"center"

    },
    pointFont:{
       color:"red",
       fontSize:23
    },
    textFonts: {
        color: "black",
        fontSize: 16
    },
    btnBox:{
        flexDirection:"row",
        justifyContent: "flex-end",
        alignItems:"center"
    },
    primaryBtn: {
        width: 55,
        margin: 5,
        backgroundColor: 'blue',
        height: 25,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5
    },
    //按钮字体
    btnFont: {
        color: 'white',
        fontSize: 15,
        fontWeight: 'bold' //粗体
    }
});

AppRegistry.registerComponent('historyDetails', () => historyDetails);
